<template>
  <div class="dialog-container">
    <div class="dialog-content">
      <div class="upload-container">
        <el-upload
          ref="upload"
          :multiple="true"
          :show-file-list="true"
          :file-list="fileList"
          :http-request="UploadImage"
          accept="image/jpeg,image/jpg,image/png"
          :on-remove="handleRemove"
          :on-success="handleSuccess"
          :on-error="handleError"
          :before-upload="beforeUpload"
          action=""
          list-type="picture-card"
        >
          <i class="el-icon-plus" />
        </el-upload>
      </div>
      <div class="line">
        <el-button @click="handleCancel"> 取消 </el-button>
        <el-button
          type="primary"
          @click="handleSubmit"
        >
          确定
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { upyunUpload } from '@/utils/upyun'

export default {
  name: 'UploadImage',
  props: {
    color: {
      type: String,
      default: '#1890ff'
    },
    infoType: {
      type: String,
      default: 'asset'
    }
  },
  data() {
    return {
      listObj: {},
      fileList: [],
      current_img: ''
    }
  },
  methods: {
    showceng() {
      this.dialogVisible = true
      setTimeout(() => {
        document.getElementsByClassName('v-modal')[0].click()
      }, 200)
    },
    UploadImage(param) {
      upyunUpload({
        file: param.file,
        watermark: true,
        info_type: this.infoType
      })
        .then((res) => {
          if (res) {
            this.current_img = res
            param.onSuccess()
          }
        })
        .catch(() => {
          param.onError()
        })
    },
    checkAllSuccess() {
      return Object.keys(this.listObj).every(
        (item) => this.listObj[item].onError || this.listObj[item].hasSuccess
      )
    },
    handleSubmit() {
      const arr = Object.keys(this.listObj)
        .map((v) => this.listObj[v])
        .filter((item) => item.hasSuccess === true)
      if (!this.checkAllSuccess()) {
        this.$message(
          '请等待所有图片上传成功。 如有网络问题，请刷新页面重新上传！'
        )
        return
      }
      this.$emit('success', arr)
      this.listObj = {}
      this.fileList = []
      this.dialogVisible = false
    },
    handleSuccess(response, file) {
      const uid = file.uid
      const objKeyArr = Object.keys(this.listObj)
      for (let i = 0, len = objKeyArr.length; i < len; i++) {
        if (this.listObj[objKeyArr[i]].uid === uid) {
          this.listObj[objKeyArr[i]].url = this.current_img
          this.listObj[objKeyArr[i]].hasSuccess = true
          return
        }
      }
    },
    handleError(err, file) {
      this.$message({
        type: 'error',
        message: file.name + '上传失败，请稍后重试' + err
      })
      this.listObj[file.uid].onError = true
    },
    handleRemove(file) {
      const uid = file.uid
      const objKeyArr = Object.keys(this.listObj)
      for (let i = 0, len = objKeyArr.length; i < len; i++) {
        if (this.listObj[objKeyArr[i]].uid === uid) {
          delete this.listObj[objKeyArr[i]]
          return
        }
      }
    },
    beforeUpload(file) {
      const _self = this
      const _URL = window.URL || window.webkitURL
      const fileName = file.uid
      this.listObj[fileName] = {}
      return new Promise((resolve, reject) => {
        const img = new Image()
        img.src = _URL.createObjectURL(file)
        img.onload = function () {
          _self.listObj[fileName] = {
            hasSuccess: false,
            onError: false,
            uid: file.uid,
            width: this.width,
            height: this.height
          }
        }
        resolve(true)
      })
    },
    handleCancel() {
      this.$emit('close')
    }
  }
}
</script>
<style lang="scss" scoped>
.upload-container {
  height: 40vh;
  overflow: hidden;
  overflow-y: auto;
}
.line {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
::v-deep .el-upload--picture-card {
  width: 80px;
  height: 80px;
  line-height: 90px;
}
::v-deep .el-upload-list--picture-card .el-upload-list__item {
  width: 80px;
  height: 80px;
  line-height: 90px;
}
::v-deep .el-icon-upload-success.el-icon-check {
  display: block;
}
</style>
